<template>
  <div>
    <div class="cates">
      <div class="left">
        <div
          v-for="(cate, index) in cates"
          :key="cate.id"
          @click="change(index)"
          :class="['cate',{
            active: index===num
          }]">
            {{cate.name}}
          </div>
      </div>
      <div class="right">
        <div class="item" v-for="item in items" :key="item.id">
          {{item.name}}
        </div>
      </div>
    </div>
    <my-tabbar/>
  </div>
</template>

<script>
import MyTabbar from 'components/MyTabbar'
import { fetchCates, fetchItems } from 'api'
export default {
  data () {
    return {
      cates: [],
      items: [],
      num: 0
    }
  },
  created () {
    this.fetchCates()
  },
  methods: {
    change (index) {
      this.num = index
      this.fetchItems()
    },
    fetchCates () {
      fetchCates().then(res => {
        if (res.data.code === 0) {
          this.cates = res.data.data
          this.fetchItems()
        }
      })
    },
    fetchItems () {
      this.items = []
      fetchItems({
        categoryId: this.cates[this.num].id
      }).then(res => {
        if (res.data.code === 0) {
          this.items = res.data.data
        }
      })
    }
  },
  components: {
    MyTabbar
  }
}
</script>

<style lang="scss" scoped>
.cates{
  position: fixed;
  left:0;
  right:0;
  top:0;
  bottom: 50px;
  background-color: #f1f1f1;
  display: flex;
  .left{
    width: 30%;
    border-right: 1px solid #333;
    height: 100%;
    .cate{
      line-height: 40px;
      font-size: 14px;
      color: #333;
      background-color: #fafafa;
      text-align: center;
      &.active{
        background-color: #3333;
        color:#f1f1f1;
      }
    }
  }
  .right{
    width: 70%;

    height: 100%;
  }
}
</style>
